<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
// import { init } from 'echarts'
// 引入封装好的接口
import { plantingAreaTop } from "../request/api";
export default {
  data() {
    return {
      info: null,
    };
  },
  computed: {
    changeTheme() {
      return this.$store.state.theme;
    },
  },
  watch: {
    //监听计算属性
    changeTheme() {
      //销毁整个图表实例
      this.info.dispose();
      this.init();
      this.getData();
      //页面一加载调用自适应函数
      this.screen();
    },
  },
  mounted() {
    //组件一加载执行初始化
    this.init();
    this.getData();
    // 页面已加载调用自适应函数
    this.screen();
    //添加一个监听事件
    window.addEventListener("resize", this.screen);
  },
  destroyed() {
    window.removeEventListener("resize", this.screen);
  },
  methods: {
    //封装一个初始化的函数 主要是数据图表的结构配置项
    init() {
      //1、获取图表容器节点
      let chart = this.$refs.chart;
      //2、初始化 echarts
      let myChart = this.$echart.init(chart,this.changeTheme);
      this.info = myChart;
      //3、初始化配置项
      let options = {
        //3.1标题
        title: {
          //主标题内容
          text: "各地区种植面积统计Top10",
          //改变主标题的位置 图表距离容器的位置
          /* 
                 1、利用数值的方式  eg:200
                 2、百分比的方式 eg:"20%"
                 3、值  左右只能  ： left center right  上下： top middle bottom
                */
          left: 20,
          //right:20
          top: 25,
          //bottom
          //  文本的样式
          textStyle: {
            fontSize: 30,
          },
        },
        grid: {
          left: "15%",
          top: "15%",
          right: "8%",
          bottom: "10%",
        },
        //3.2 x轴
        xAxis: {
          type: "value", //坐标轴类型。 'value' 数值轴，适用于连续数据。
        },
        //3.3 y轴
        yAxis: {
          type: "value",
          axisLine: {
            //是否显示坐标轴轴线。
            //数据线
            show: true,
          },
          axisTick: {
            //是否显示坐标轴刻度。
            //刻度
            show: true,
          },
        },
        //3.5 是否显示提示框组件。
        tooltip: {
          show: true,
        },
        //3.6坐标轴指示器
        axisPointer: {
          show: true,
          type: "shadow",
        },
        //3.7工具栏
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              //下载图片
              show: true,
            },
            restore: {
              //还原
              show: true,
            },
            dataView: {
              //数据视图
              show: true,
            },
            magicType: {
              type: ["line", "bar"],
            },
          },
        },
        //3.4 数据列
        series: [
          {
            type: "bar", //柱状图
            //data: [19, 40, 60, 70], //每一个柱状图的数据
            // data: sData,
            label: {
              //是否显示标签。
              show: true,
              // color:'green',
              //  fontSize:40
              position: "right",
            },
            itemStyle: {
              // 每一项的样式
              color: {
                // 自定义颜色 在echarts中线性渐变有4个值，起：x,y 止 x2,y2
                type: "linear", //线性
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  // 颜色起始
                  {
                    offset: 0,
                    color: "#eaff56",
                  },
                  {
                    offset: 1,
                    color: "#000",
                  },
                ],
              },
            },
          },
        ],
      };
      //4、给echart 设置配置项内容
      myChart.setOption(options);
    },
    // 封装一个获取 数据的方法
    async getData() {
      //5、调用种植接口
      let result = await plantingAreaTop();
      console.log(result, "reuslut");
      //数据排序实际就是数组的排序 sort
      //如果你的数组是[1,2,3,4] sort()  [{name:xx},{name:xx},,{name:xx},] sort(funtion(a,b){return a.name-b.name})  a,b是相邻的两个值  a.name-b.name 从大到小 b.name-a.name
      //排序
      result.data.sort((a, b) => {
        return a.area - b.area;
      });
      let yData = result.data.map((item) => item.name);
      let sData = result.data.map((item) => item.area);
      this.setEchart(yData, sData);
    },
    // 封装一个重新设置y轴和数据列的方法
    setEchart(yData, sData) {
      let options = {
        yAxis: {
          type: "category",
          data: yData,
        },
        series: [
          {
            type: "bar",
            data: sData,
          },
        ],
      };
      this.info.setOption(options);
    },
    // 数据图表自适应的方法
    screen() {
      // 'resize' 专门做自适应
      this.info.resize();
      let width = this.$refs.chart.offsetWidth;
      console.log(this.$refs.chart.offsetWidth, "hahhaha");
      //自适应字体
      let num = (width / 100) * 5;
      //重置配置项的字体大小
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      this.info.setOption(options);
    },
  },
};
</script>

<style>
</style>